import React from 'react'
import { Avatar } from 'antd';
import { TeamOutlined } from '@ant-design/icons';
import "./home.scss"
import Avatars from '../../component/avatars';
import Chart from '../../component/chart'
import Asides from '../../component/homeComponent/asides';
import { UserIcon, UserFriendIcon } from '../../utils/icons';
import { useSelector } from 'react-redux'

export default function Home() {
    const languages = useSelector((state) => state.publicReducer.language)
    const username = useSelector((state) => state.userReducer.user.username)
    return (
        <div className="home">
            <div className="nav">
                <Avatars username={username} level="Lv.99" coupon={languages === "Korean" ? "쿠폰 잔액" : (languages === "Chinese" ? "可用优惠券" : "Coupon Balance")} balance="8,888,888" icon={<UserIcon />} />
                <Avatars username={languages === "Korean" ? "총 관리 친구 수" : (languages === "Chinese" ? "朋友数" : "Total friends number")} level="Lv.99" coupon={languages === "Korean" ? "당월 My 수익" : (languages === "Chinese" ? "我的当月收益" : "This month my revenue")} balance="8,888,888" icon={<UserFriendIcon />} />
            </div>
            <div className="main">
                <div className="left">
                    <ul>
                        <li>
                            <figure>{languages === "Korean" ? "보유 현금" : (languages === "Chinese" ? "现金余额" : "Cash Balance")}</figure>
                            <figcaption>8,888,888,888{languages === "Korean" ? "원" : (languages === "Chinese" ? "韩元" : "won")}</figcaption>
                        </li>
                        <li>
                            <figure>{languages === "Korean" ? "금일 총 수익" : (languages === "Chinese" ? "今日总收益" : "Today's profit")}</figure>
                            <figcaption>8,888,888,888{languages === "Korean" ? "원" : (languages === "Chinese" ? "韩元" : "won")}</figcaption>
                        </li>
                        <li>
                            <figure>{languages === "Korean" ? "당월 총 수익" : (languages === "Chinese" ? "当月总收益" : "This month profit")}</figure>
                            <figcaption>8,888,888,888{languages === "Korean" ? "원" : (languages === "Chinese" ? "韩元" : "won")}</figcaption>
                        </li>
                        <li>
                            <div>
                                <figure>{languages === "Korean" ? "월 수익률(환산)" : (languages === "Chinese" ? "月回报率（折算）" : "Monthly rate of return (converted)")}</figure>
                                <figcaption>9.9%</figcaption>
                            </div>
                            <div>
                                <figure>{languages === "Korean" ? "월 수익률(환산)" : (languages === "Chinese" ? "月回报率（折算）" : "Monthly rate of return (converted)")}</figure>
                                <figcaption>9.9%</figcaption>
                            </div>
                        </li>
                        <li><b>거래 코인 :</b>
                            <article>
                                <Asides header="ADA" main="999,999,999,999" background="#FFE8D2" />
                                <Asides header="ADA" main="999,999,999,999" background="#DDF5D2" />
                                <Asides header="ADA" main="999,999,999,999" background="#D5F4F9" />
                                <Asides header="ADA" main="999,999,999,999" background="#D5E1F9" />
                                <Asides header="ADA" main="999,999,999,999" background="#F6E4F9" />
                                <Asides header="ADA" main="999,999,999,999" background="#FCDFDF" />
                            </article>
                        </li>
                    </ul>
                </div>
                <div className='home_chart'>
                    <Chart sizes="large" header={languages === "Korean" ? "월별 총 수익" : (languages === "Chinese" ? "月总收益" : "Revenue per month")} main="8,888,888,888" />
                </div>
            </div>
            <div className="footer">
                <hgroup>{languages === "Korean" ? "Lv.6 이상 유저는 에이전트가 되어 신규로 가입한 친구의 수수료의 일정부분에 대한 수익을 가져갈 수 있습니다." : (languages === "Chinese" ? "Lv.6及以上的用户可以成为代理，享受新注册好友收益的部分佣金。" : "Users of Lv.6 or higher can become an agent and earn a portion of the fees of newly registered friends.")}</hgroup>
            </div>
        </div>
    )
}
